// import type { ExtractPropTypes } from 'vue'

import type { DatePickerProps } from 'csui'

// export type CsCalendarProps = ExtractPropTypes<typeof csCalendarProps>

type UseDatePickerProps<
  D extends Record<string, any>,
  P extends keyof Readonly<D>
> = UseFormItemProps<DatePickerProps, D, P>

/**
 * 日期选择器 el-date-picker
 * @param prop item.prop
 * @param label item.label
 * @param props item的其他属性
 * @returns form-item-data
 */
export function useDatePicker<
  T extends Record<string, any>,
  P extends keyof T
>(
  prop: P,
  label: string,
  props: UseDatePickerProps<T, P> = {}
): FormItemProps<T, P> {
  return {
    ...props,
    prop,
    label,
    component: 'cs-date-picker'
  }
}

/**
 * 日期选择器 valueFormat = 'YYYY-MM-DD'
 * @param prop item.prop
 * @param label item.label
 * @param props item的其他属性
 * @returns form-item-data
 */
export function useDatePickerYYYYMMDD<
  T extends Record<string, any>,
  P extends keyof T
>(prop: P, label: string, props: UseDatePickerProps<T, P> = {}) {
  if (!props.props) {
    props.props = {}
  }
  props.props.valueFormat = 'YYYY-MM-DD'
  // 这个是默认的, 不需要设置
  // props.props.format = 'YYYY-MM-DD'
  return useDatePicker(prop, label, props)
}

/**
 * 日期时间选择器 el-date-picker
 * @param prop item.prop
 * @param label item.label
 * @param props item的其他属性
 * @returns form-item-data
 */
export function useDateTimePicker<
  T extends Record<string, any>,
  P extends keyof T
>(prop: P, label: string, props: UseDatePickerProps<T, P> = {}) {
  if (!props.props) {
    props.props = {}
  }
  props.props.valueFormat = 'YYYY-MM-DD HH:mm:ss'
  props.props.format = 'YYYY-MM-DD HH:mm:ss'
  props.props.type = 'datetime'
  return useDatePicker<T, P>(prop, label, props)
}

/**
 * 日期时间选择器 el-date-picker
 * @param prop item.prop
 * @param label item.label
 * @param props item的其他属性
 * @returns form-item-data
 */
export function useDateTimePickerYYYYMMDDHHmm<
  T extends Record<string, any>,
  P extends keyof T
>(prop: P, label: string, props: UseDatePickerProps<T, P> = {}) {
  if (!props.props) {
    props.props = {}
  }
  props.props.valueFormat = 'YYYY-MM-DD HH:mm'
  props.props.format = 'YYYY-MM-DD HH:mm'
  props.props.type = 'datetime'
  return useDatePicker<T, P>(prop, label, props)
}
/**
 * 年份选择器 el-date-picker
 * @param prop item.prop
 * @param label item.label
 * @param props item的其他属性
 * @returns form-item-data
 */
export function useDatePickerYear<
  T extends Record<string, any>,
  P extends keyof T
>(prop: P, label: string, props: UseDatePickerProps<T, P> = {}) {
  if (!props.props) {
    props.props = {}
  }
  props.props.type = 'year'
  props.props.valueFormat = 'YYYY'
  return useDatePicker<T, P>(prop, label, props)
}

/**
 * 年份选择器（多选） el-date-picker
 * @param prop item.prop
 * @param label item.label
 * @param props item的其他属性
 * @returns form-item-data
 */
export function useDatePickerYears<
  T extends Record<string, any>,
  P extends keyof T
>(prop: P, label: string, props: UseDatePickerProps<T, P> = {}) {
  if (!props.props) {
    props.props = {}
  }
  props.change = (value: string[], items, formData) => {
    if (!value) {
      delete formData[prop]
    }
  }
  props.props.type = 'years'
  props.props.valueFormat = 'YYYY'
  return useDatePicker<T, P>(prop, label, props)
}
